<template>
  <div class="wrap">
    <el-form
      :inline="true"
      :model="ruleform"
      ref="ruleForm"
      :rules="rules"
      class="demo-form-inline"
    >
      <el-form-item label="序列号" prop="sn" show-overflow-tooltip>
        <el-input
          v-model="ruleform.sn"
          title="序列号"
          style="width:450px;"
          placeholder="以YDT-ONVIF- 、YDT-SP- 、YDT-IOT-开头,不能输入中文"
        ></el-input>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="ruleform.name" placeholder></el-input>
      </el-form-item>
      <el-form-item label="主源" prop="reg_type">
        <el-select v-model="ruleform.reg_type" placeholder="请选择">
          <el-option label="RTSP" value="10"></el-option>
          <el-option label="WS-FLV" value="11"></el-option>
          <el-option label="SDK直连" value="4"></el-option>
          <el-option label="环保局" value="81"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="主源地址" prop="stream_from">
        <el-input
          v-model="ruleform.stream_from"
          placeholder="不能输入中文"
        ></el-input>
      </el-form-item>
      <el-form-item label="通道数" prop="chns">
        <el-input
          v-model.number="ruleform.chns"
          placeholder="请输入数字"
        ></el-input>
      </el-form-item>
      <el-form-item label="厂家" prop="factory_type">
        <el-select v-model="ruleform.factory_type" placeholder="请选择">
          <el-option label="匿名厂家" value="0"></el-option>
          <el-option label="汉邦" value="23"></el-option>
          <el-option label="海康" value="2"></el-option>
          <el-option label="大华" value="25"></el-option>
          <el-option label="宇视" value="33"></el-option>
          <el-option label="美电贝尔" value="32"></el-option>
          <el-option label="ONVIF" value="100"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="登录账户" prop="login_user">
        <el-input
          v-model="ruleform.login_user"
          placeholder="不能输入中文"
        ></el-input>
      </el-form-item>
      <el-form-item label="登录密码" prop="login_pwd">
        <el-input
          v-model="ruleform.login_pwd"
          placeholder="不能输入中文"
        ></el-input>
      </el-form-item>
      <el-form-item label="访问地址" prop="domain">
        <el-input
          v-model="ruleform.domain"
          placeholder="不能输入中文"
        ></el-input>
      </el-form-item>
      <el-form-item label="映射端口" prop="port_map">
        <el-input
          v-model.number="ruleform.port_map"
          placeholder="请输入数字"
        ></el-input>
      </el-form-item>
      <el-form-item label="应用端口" prop="port_app">
        <el-input
          v-model.number="ruleform.port_app"
          placeholder="请输入数字"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="onSubmit('ruleForm')"
          >添加</el-button
        >
        <el-button type="warning" plain @click="onReset('ruleForm')"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getData, postData } from "@/request/http";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    var checkNoChinese = (rule, value, callback) => {
      if (value) {
        if (new RegExp(/^[\u4E00-\u9FA5]+$/).test(value)) {
          callback(new Error("请不要输入中文！"));
        } else {
          callback();
        }
      }
      callback();
    };
    var checkNumber = (rule, value, callback) => {
      if (value != "") {
        if (/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value) == false) {
          callback(new Error("请输入大于0的数字"));
        } else {
          callback();
        }
      } else {
        callback();
      }
      callback();
    };

    return {
      //form提交
      ruleform: {
        sn: "",
        name: "",
        reg_type: "",
        stream_from: "",
        chns: "",
        factory_type: "",
        login_user: "",
        login_pwd: "",
        domain: "",
        port_map: "",
        port_app: "",
      },
      rules: {
        sn: [
          { required: true, message: "请输入", trigger: "blur" },
          { validator: checkNoChinese, trigger: "blur" },
        ],
        name: [{ required: false, message: "请输入", trigger: "blur" }],
        reg_type: [{ required: true, message: "请输入", trigger: "blur" }],
        stream_from: [
          { required: true, message: "请选择", trigger: "blur" },
          { validator: checkNoChinese, trigger: "blur" },
        ],
        chns: [
          { required: false, message: "必须为数字值" },
          { validator: checkNumber, trigger: "blur" },
        ],
        factory_type: [{ required: false, message: "", trigger: "blur" }],
        login_user: [
          { required: false, message: "", trigger: "blur" },
          { validator: checkNoChinese, trigger: "blur" },
        ],
        login_pwd: [
          { required: false, message: "", trigger: "blur" },
          { validator: checkNoChinese, trigger: "blur" },
        ],
        domain: [
          { required: false, message: "", trigger: "blur" },
          { validator: checkNoChinese, trigger: "blur" },
        ],
        port_map: [
          { required: false, message: "必须为数字值" },
          { validator: checkNumber, trigger: "blur" },
        ],
        port_app: [
          { required: false, message: "必须为数字值" },
          { validator: checkNumber, trigger: "blur" },
        ],
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    //添加 提交
    onSubmit(formName) {
      var that = this;
      that.$refs[formName].validate((valid) => {
        if (that.ruleform.sn == "" || that.ruleform.stream_from == "") {
          return;
        }
        if (valid) {
          postData("/adminweb/device/register", {
            sn: that.ruleform.sn,
            name: that.ruleform.name,
            reg_type: Number(that.ruleform.reg_type),
            stream_from: that.ruleform.stream_from,
            chns: that.ruleform.chns,
            factory_type: Number(that.ruleform.factory_type),
            login_user: that.ruleform.login_user,
            login_pwd: that.ruleform.login_pwd,
            domain: that.ruleform.domain,
            port_map: that.ruleform.port_map,
            port_app: that.ruleform.port_app,
          })
            .then((res) => {
              if (res.code == 0) {
                that.$message.success("添加成功");
                //刷新table
                that.$emit("refreshTableList");
              } else {
                that.$message.error(res.code + "，" + res.msg);
              }
            })
            .catch((res) => {
              that.$message.error(res);
            });
        } else {
          that.$message.error("添加失败");
          return false;
        }
      });
    },

    // 取消
    onReset(val) {
      this.$emit("reset", true);
      this.$refs[val].resetFields();
    },
  },
  watch: {},
};
</script>
<style scoped>
/*标题*/
.show-title {
  width: 100%;
  height: 40px;
  line-height: 40px;
  position: relative;
  background: #c0dee2;
  padding-left: 15px;
  font-size: 14px;
  margin: 6px 0 20px 0;
  border-radius: 10px 10px 0 0;
  font-weight: bold;
}
.show-title2,
.show-title3 {
  margin-top: 60px;
}

.show-title::before {
  content: "";
  width: 2px;
  height: 16px;
  background: #676a6d;
  position: absolute;
  top: 12px;
  left: 27px;
}

.show-title span {
  float: left;
  color: #676a6d;
  margin-left: 25px;
}
.list2 {
  padding-bottom: 130px;
}
</style>
